<!-- *@description:  -->
<!-- *@Author: M.佑先生 -->
<!-- *@Date: 2025-07-11 09:46:01 -->
<template>
	<div class="AccessSkillBox">
		<div class="arrows-box">
			<div
				class="arrow-item"
				v-for="(item, i) in allArrows"
				:key="item.text"
				:style="{ left: item.left, bottom: item.bottom, position: 'absolute' }"
			>
				<div class="arrow-anim" :style="{ animationDelay: `${i * 0.2}s` }">
					<img src="@/assets/img/arrow-up1.png" alt="arrow" />
				</div>
				<div class="arrow-label">{{ item.text }}</div>
			</div>

			<div
				class="arrow-item"
				v-for="(item, i) in allArrowsData"
				:key="item.text"
				:style="{ left: item.left, bottom: item.bottom, position: 'absolute' }"
			>
				<div class="arrow-label">{{ item.text }}</div>
				<div class="arrow-anim1">
					<img :src="item.icon" alt="arrow" />
				</div>
			</div>
		</div>

		<div class="hunanMap">
			<img src="@/assets/img/hunanmap.png" alt="arrow" />
		</div>
		<div class="access-btn">基础设施</div>
	</div>
</template>

<script setup>
import wangluo from '@/assets/img/wangluo.png';
import cunchu from '@/assets/img/cunchu.png';
import fuwuqi from '@/assets/img/fuwuqi.png';
import anquan from '@/assets/img/anquan.png';
const allArrows = [
	{ text: '无人机', left: `-${(88 / 1920) * 100}vw`, bottom: `${(48 / 1920) * 100}vw` },
	{ text: '智联网', left: `-${(30 / 1920) * 100}vw`, bottom: `${(100 / 1920) * 100}vw` },
	{ text: '气象设施', left: `${(470 / 1920) * 100}vw`, bottom: `${(95 / 1920) * 100}vw` },
	{ text: '起降场', left: `${(581 / 1920) * 100}vw`, bottom: `${(104 / 1920) * 100}vw` },
	{ text: '空域监控', left: `${(528 / 1920) * 100}vw`, bottom: `${(26 / 1920) * 100}vw` }
];

const allArrowsData = [
	{
		icon: wangluo,
		text: '网络',
		left: `${(51 / 1920) * 100}vw`,
		bottom: `${(76 / 1920) * 100}vw`
	},
	{
		icon: cunchu,
		text: '存储',
		left: `${(116 / 1920) * 100}vw`,
		bottom: `${(40 / 1920) * 100}vw`
	},
	{
		icon: fuwuqi,
		text: '服务器',
		left: `${(300 / 1920) * 100}vw`,
		bottom: `${(40 / 1920) * 100}vw`
	},
	{
		icon: anquan,
		text: '安全',
		left: `${(370 / 1920) * 100}vw`,
		bottom: `${(80 / 1920) * 100}vw`
	}
];
</script>

<style lang="scss" scoped>
.AccessSkillBox {
	width: 480px;
	height: 142px;
	position: relative;
	background: url('@/assets/img/AccessSkillBox1.png') no-repeat center center;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.arrows-box {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		.arrow-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 90px;
			.arrow-anim {
				width: 40px;
				height: 80px;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				animation: arrowUp 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
				img {
					width: 100%;
					height: 100%;
				}
			}
			.arrow-label {
				// margin-top: 6px;
				color: #fff;
				font-size: 16px;
				text-shadow: 0 2px 8px #0ff;
				letter-spacing: 1px;
			}
		}
	}
	.access-btn {
		width: 141px;
		height: 41px;
		position: absolute;
		left: 50%;
		bottom: 0px;
		text-align: center;
		line-height: 41px;
		transform: translateX(-50%);
		background: url('@/assets/img/titleBg.png') no-repeat center center;
		background-size: 100% 100%;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		border-radius: 8px;
		z-index: 3;
		cursor: pointer;
		letter-spacing: 4px;
	}

	.hunanMap {
		position: absolute;
		width: 125px;
		height: 147px;
		bottom: 48px;
		img {
			width: 100%;
			height: 100%;
		}
	}
}

@keyframes arrowUp {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(-16px);
		opacity: 0.7;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>
